<template>
  <div class="ring-pop-up-content">
    <div class="__title">
      {{title}}
    </div>
    <div class="__button">
      <svg-icon icon-class='answer' v-show="!hideAnser" @click="handleAnswer"></svg-icon>
      <svg-icon :icon-class="powerStatus?  'power_end' : 'power_ing'" v-show="!hidePower" @click="handlePower">
      </svg-icon>
      <svg-icon icon-class='hangup' @click="handleHangup"></svg-icon>
    </div>
  </div>
</template>

<script>
import store from '@/store'

export default {
  props: {
    webrtc2Sip: Object,
    answer: Function,
    hangup: Function,
  },
  computed: {
    powerStatus1() {
      return store.state.cache.powerStatus
    },
  },
  data() {
    return {
      title: '新来电',
      hideAnser: false, // 隐藏接听按钮
      hidePower: true, // 隐藏抢权按钮
      powerStatus: false, // 未抢权状态
    }
  },
  watch: {
    powerStatus1(val) {
      this.powerStatus = val
    },
  },
  methods: {
    handleAnswer() {
      this.hideAnser = true
      store.commit('setPowerStatus', false) // 抢权
      this.answer()
      if (this.webrtc2Sip.phoneType === 'hand_microphone') {
        this.hidePower = false
        this.title = '未抢权'
      }
      store.commit('callFlagEvent', false)
    },
    handlePower() {
      if (this.webrtc2Sip) {
        if (this.powerStatus) {
          this.webrtc2Sip.sipRelease()
          this.title = '未抢权'
        } else {
          this.webrtc2Sip.sipRequest()
          this.title = '抢权中...'
        }
        this.powerStatus = !this.powerStatus

        store.commit('setPowerStatus', this.powerStatus)
      }
    },
    handleHangup() {
      this.hidePower = true
      this.hangup()
    },
  },
  mounted() {
    if (store.state.cache.callFlag) {
      this.$nextTick(() => {
        this.handleAnswer()
      })
    }
  },
  created() {
    this.title = store.state.cache.callFlag ? '通话中...' : '新来电'
  },
}
</script>

<style lang="scss" scoped>
</style>